<template>
  <div>
    <h1>Vue3 组价通信 setup 语法糖</h1>
    <!-- <div>
      <h3>伏组件： {{ num }} <button @click="addNum">+1</button> </h3>
      <Child2 :num="num" @addNum="addNum" />
    </div> -->
    <h1>Vue3 组价通信 非setup 语法糖</h1>
    <h3>伏组件：{{ oo }} <button @click="addOO">+1</button> </h3>
    <div>
      <Child3 :oo="oo" @addOO="addOO"/>
    </div>
    <h1>Vue2 组价通信 </h1>
    <!-- <h3>父组件：{{ count }} <button @click="addCount(1)">_+1</button> </h3>
    <Child1 :count="count" @qwe="addCount" /> -->
  </div>
</template>

<script>
import { ref } from 'vue'
import Child3 from './3.vue'
export default {
  setup() {
    const oo = ref(1);
    const addOO = () => oo.value++
    return {
      oo,
      addOO,
    }
  },
  components: {
    Child3
  }
}
</script>

<!-- 
<script setup>
import { ref } from 'vue'
import Child2 from './2.vue'
const num = ref(1);
const addNum = (value) => num.value += value
</script> -->

<!-- 
<script>
import Child1 from './1.vue'
export default {
  components: {
    Child1
  },
  data() {
    return {
      count: 1
    }
  },
  methods: {
    addCount(value) {
      this.count += value
    }
  }
}
</script> -->